<template>
  <div class="custom-font">
    <div class='title'>将进酒·君不见</div>
    <div>李白·唐</div>
    <div>君不见，黄河之水天上来，奔流到海不复回。</div>
    <div>君不见，高堂明镜悲白发，朝如青丝暮成雪。</div>
    <div>人生得意须尽欢，莫使金樽空对月。</div>
    <div>天生我材必有用，千金散尽还复来。</div>
    <div>烹羊宰牛且为乐，会须一饮三百杯。</div>
    <div>岑夫子，丹丘生，将进酒，杯莫停。</div>
    <div>与君歌一曲，请君为我倾耳听。</div>
    <div>钟鼓馔玉不足贵，但愿长醉不愿醒。</div>
    <div>古来圣贤皆寂寞，惟有饮者留其名。</div>
    <div>陈王昔时宴平乐，斗酒十千恣欢谑。</div>
    <div>主人何为言少钱，径须沽取对君酌。</div>
    <div>五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。</div>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, reactive } from 'vue';

  const fontUrl = '/font/汉仪雅酷黑 85W.ttf';

  onMounted(()=>{
    const style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = `@font-face { font-family: 'Roboto'; src:url("${fontUrl}") }`;
    document.getElementsByTagName('head')[0].appendChild(style);
  });
</script>

<style scoped>
  .custom-font {
    font-family: 'Roboto';
    font-size: 25px;
    background: #ffffff;
    padding: 100px 0;
    border-radius: 20px;
    box-shadow: 0 3px 12px rgba(98,107,181,.25);
    margin: 20px;
  }
  .custom-font .title{
    font-size: 40px;
  }
</style>
